<!--
 * @Date: 2022-01-13 10:50:47
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2022-01-17 15:34:06
 * @FilePath: \views\points.html
-->
<!doctype html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    <title>OPCDa服务转webapi服务工具说明</title>
    <style type='text/css'>
        .line {
            margin-bottom: 10px;
            display: inline-block;
            width: 50%;
        }

        .tag,
        .read,
        .value,
        .copy {
            border-radius: 3px;
            padding: 3px 5px;
        }

        .tag {
            background-color: rgb(223, 223, 223);
            color: rgb(92, 92, 92);
            cursor: pointer;
        }

        .read {
            background-color: rgb(32, 133, 91);
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }

        .copy {
            background-color: rgb(74, 76, 235);
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
        .value { 
            color: rgb(179, 95, 16);
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
    <script src="static/jquery.min.js"></script>
</head>

<body class='typora-export os-windows'>

    <h1>请用浏览器功能自行查找：ctrl+F</h1>
    <h2>点击名称复制<span style="color: rgb(5, 143, 74);" id="msg"></span></h2>

    <div id="tags"></div>
    <input id="hide" type="text" style="opacity: 0;">


</body>
<script>
    var readpoints = [] ;
    var readdoms = [] ;
    $.post("/api/opc/points", "",
        function (re, textStatus, jqXHR) {
            $.each(re.data, function (i, v) {
                $("#tags").append(`<div class="line"><span class="tag">${v}</span><span class="read" tag="${v}">监听</span><span class="value" ></span></div>`);
            });
            //复制
            $('.tag').click((e) => { 
                $("#hide").val($(e.target).text());
                $("#hide").select();
                $("#msg").html($(e.target).text()+"复制成功")
                document.execCommand("Copy")
            })
            //监听
            $('.read').click((e) => {
               let tag =  $(e.target).attr('tag')
               let dom = $(e.target).next() 
               readpoints.push(tag)
               readdoms.push(dom)
              
            })
        });

        let intval =   setInterval(() => {
                read() 
               }, 2000);

        function read() {
            if (readpoints.length>0) {
            
            $.post("/api/opc/read", {tags:readpoints},
             function (re, textStatus, jqXHR) { 
                // console.log(re);
                if (re.code==0) {
                    readpoints.forEach((tag,index) => {
                        readdoms[index].html(re.data[tag]||'异常')
                    });
                }else{
                    readdoms[index].html('异常')
                }
             })

          }
              
        }


</script>

</html>